<template>
	<view class="historical-data">
		<!-- 顶部控制面板 -->
		<view class="control-panel animate-slide-down">
			<view class="panel-header animate-fade-in">
				<text class="panel-title">📊 历史数据分析</text>
				<text class="panel-subtitle">Historical Data Analysis</text>
			</view>
			
			<!-- 时间选择器 -->
			<view class="time-selector-card animate-scale-in">
				<view class="date-row">
					<view class="date-picker-modern animate-slide-left">
						<view class="date-label">
							<text class="label-icon">📅</text>
							<text class="label-text">开始时间</text>
						</view>
						<picker mode="date" :value="startDate" @change="onStartDateChange">
							<view class="picker-modern">
								<text class="picker-value">{{ startDate }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					
					<view class="date-separator animate-pulse">
						<text class="separator-line">—</text>
					</view>
					
					<view class="date-picker-modern animate-slide-right">
						<view class="date-label">
							<text class="label-icon">📅</text>
							<text class="label-text">结束时间</text>
						</view>
						<picker mode="date" :value="endDate" @change="onEndDateChange">
							<view class="picker-modern">
								<text class="picker-value">{{ endDate }}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>
				
				<button class="query-btn animate-bounce-in" @click="queryAllData" :loading="loading" :disabled="loading">
					<text class="btn-icon">{{ loading ? '⏳' : '🔍' }}</text>
					<text class="btn-text">{{ loading ? '数据加载中...' : '查询历史数据' }}</text>
				</button>
			</view>
		</view>
		
		<!-- 图表展示区域 -->
		<view class="chart-section animate-slide-up">
			<view class="chart-header animate-fade-in-delay">
				<text class="chart-title">💧 水文数据可视化</text>
				<view class="chart-indicators">
					<view class="indicator animate-scale-in-delay-1" v-if="rainfallChartData.length > 0">
						<view class="indicator-dot rainfall-dot"></view>
						<text class="indicator-text">降雨 {{ rainfallChartData.length }}条</text>
					</view>
					<view class="indicator animate-scale-in-delay-2" v-if="hasReservoirData">
						<view class="indicator-dot reservoir-dot"></view>
						<text class="indicator-text">水库 {{ reservoirChartData.length }}条</text>
					</view>
					<view class="indicator animate-scale-in-delay-3" v-if="hasRiverData">
						<view class="indicator-dot river-dot"></view>
						<text class="indicator-text">河道 {{ riverChartData.length }}条</text>
					</view>
				</view>
			</view>
			
			<view class="chart-container animate-zoom-in">
				<canvas 
					canvas-id="mainChart" 
					class="main-chart"
					@touchstart="onChartTouch"
					@touchmove="onChartTouch"
					@touchend="onChartTouch"
				></canvas>
				
				<!-- 图表遮罩层 -->
				<view class="chart-overlay animate-fade-in" v-if="loading">
					<view class="loading-spinner animate-spin">
						<text class="spinner-icon">⏳</text>
						<text class="loading-text animate-pulse">正在绘制图表...</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 数据洞察卡片 -->
		<view class="insights-section animate-slide-up-delay" v-if="!loading && (rainfallChartData.length > 0 || hasReservoirData || hasRiverData)">
			<view class="insights-header animate-fade-in-delay">
				<text class="insights-title">📈 数据洞察</text>
			</view>
			
			<view class="insights-grid">
				<!-- 降雨统计 -->
				<view class="insight-card rainfall-card animate-card-in-1" v-if="rainfallChartData.length > 0">
					<view class="card-header">
						<text class="card-icon">🌧️</text>
						<text class="card-title">降雨统计</text>
					</view>
					<view class="card-content">
						<view class="metric">
							<text class="metric-value">{{ getTotalRainfall() }}</text>
							<text class="metric-unit">mm</text>
						</view>
						<text class="metric-label">总降雨量</text>
					</view>
				</view>
				
				<!-- 水库统计 -->
				<view class="insight-card reservoir-card animate-card-in-2" v-if="hasReservoirData">
					<view class="card-header">
						<text class="card-icon">🏞️</text>
						<text class="card-title">水库水位</text>
					</view>
					<view class="card-content">
						<view class="metric">
							<text class="metric-value">{{ getAvgReservoirLevel() }}</text>
							<text class="metric-unit">m</text>
						</view>
						<text class="metric-label">平均水位</text>
					</view>
				</view>
				
				<!-- 河道统计 -->
				<view class="insight-card river-card animate-card-in-3" v-if="hasRiverData">
					<view class="card-header">
						<text class="card-icon">🏔️</text>
						<text class="card-title">河道水位</text>
					</view>
					<view class="card-content">
						<view class="metric">
							<text class="metric-value">{{ getAvgRiverLevel() }}</text>
							<text class="metric-unit">m</text>
						</view>
						<text class="metric-label">平均水位</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state animate-fade-in-slow" v-if="!loading && rainfallChartData.length === 0 && !hasReservoirData && !hasRiverData">
			<text class="empty-icon animate-bounce">📊</text>
			<text class="empty-title animate-slide-up-delay">暂无数据</text>
			<text class="empty-subtitle animate-slide-up-delay-2">请选择时间范围并点击查询按钮获取历史数据</text>
		</view>
	</view>
</template>

<script setup>
import { ref, watch, nextTick, onMounted, computed } from 'vue'

// 定义props
const props = defineProps({
	stationCode: {
		type: String,
		required: true
	}
})

// 响应式数据
const startDate = ref(getDefaultStartDate())
const endDate = ref(getDefaultEndDate())
const loading = ref(false)

const rainfallData = ref([])
const reservoirData = ref([])
const riverData = ref([])

// 图表数据
const rainfallChartData = ref([])
const reservoirChartData = ref([])
const riverChartData = ref([])
const hasReservoirData = ref(false)
const hasRiverData = ref(false)

// 计算属性
const hasAnyData = computed(() => {
	return rainfallChartData.value.length > 0 || 
		   reservoirChartData.value.length > 0 || 
		   riverChartData.value.length > 0
})

// Canvas上下文
let chartCtx = null

// 获取默认开始日期（7天前）
function getDefaultStartDate() {
	const date = new Date()
	date.setDate(date.getDate() - 7)
	return date.toISOString().split('T')[0]
}

// 获取默认结束日期（今天）
function getDefaultEndDate() {
	const date = new Date()
	return date.toISOString().split('T')[0]
}

// 格式化日期时间
function formatDateTime(dateStr) {
	return `${dateStr} 08:00:00`
}

// 日期选择处理
const onStartDateChange = (e) => {
	startDate.value = e.detail.value
}

const onEndDateChange = (e) => {
	endDate.value = e.detail.value
}

// 初始化Canvas
const initCanvas = async () => {
	await nextTick()
	
	if (!chartCtx) {
		chartCtx = uni.createCanvasContext('mainChart')
	}
}

// 绘制主图表
const drawMainChart = () => {
	if (!chartCtx) return
	
	const ctx = chartCtx
	const canvasWidth = 750   // 更大的画布宽度
	const canvasHeight = 1200  // 增加画布高度确保完整显示
	const padding = 60        // 减小内边距
	const chartWidth = canvasWidth - padding * 2
	const chartHeight = canvasHeight - padding * 2
	
	// 清空画布
	ctx.clearRect(0, 0, canvasWidth, canvasHeight)
	
	// 设置现代化背景渐变 - 修复Edge兼容性
	try {
		const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight)
		gradient.addColorStop(0, '#667eea')
		gradient.addColorStop(0.5, '#764ba2')
		gradient.addColorStop(1, '#f093fb')
		ctx.fillStyle = gradient
	} catch (e) {
		// Edge兼容性回退
		ctx.fillStyle = '#667eea'
	}
	ctx.fillRect(0, 0, canvasWidth, canvasHeight)
	
	// 添加毛玻璃效果背景
	ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'
	ctx.fillRect(padding - 20, padding - 20, chartWidth + 40, chartHeight + 40)
	
	// 获取所有时间点并排序
	const allTimes = new Set()
	rainfallChartData.value.forEach(item => allTimes.add(item.time))
	reservoirChartData.value.forEach(item => allTimes.add(item.time))
	riverChartData.value.forEach(item => allTimes.add(item.time))
	
	const timeArray = Array.from(allTimes).sort()
	if (timeArray.length === 0) return
	
	// 获取数据范围
	const rainfallValues = rainfallChartData.value.map(d => d.precipitation || 0)
	const reservoirValues = reservoirChartData.value.map(d => d.value || 0)
	const riverValues = riverChartData.value.map(d => d.value || 0)
	
	const maxRainfall = rainfallValues.length > 0 ? Math.max(...rainfallValues) : 0
	const maxReservoir = reservoirValues.length > 0 ? Math.max(...reservoirValues) : 0
	const minReservoir = reservoirValues.length > 0 ? Math.min(...reservoirValues) : 0
	const maxRiver = riverValues.length > 0 ? Math.max(...riverValues) : 0
	const minRiver = riverValues.length > 0 ? Math.min(...riverValues) : 0
	
	// 计算图表区域分割
	const rainfallAreaHeight = chartHeight * 0.4  // 降雨区域占40%
	const waterAreaHeight = chartHeight * 0.6     // 水位区域占60%
	
	// 绘制现代化背景区域 - 修复Edge兼容性
	try {
		// 降雨区域背景
		const rainfallBg = ctx.createLinearGradient(0, padding, 0, padding + rainfallAreaHeight)
		rainfallBg.addColorStop(0, 'rgba(74, 144, 226, 0.15)')
		rainfallBg.addColorStop(1, 'rgba(74, 144, 226, 0.05)')
		ctx.fillStyle = rainfallBg
	} catch (e) {
		ctx.fillStyle = 'rgba(74, 144, 226, 0.1)'
	}
	ctx.fillRect(padding, padding, chartWidth, rainfallAreaHeight)
	
	try {
		// 水位区域背景
		const waterBg = ctx.createLinearGradient(0, padding + rainfallAreaHeight, 0, padding + chartHeight)
		waterBg.addColorStop(0, 'rgba(26, 188, 156, 0.15)')
		waterBg.addColorStop(1, 'rgba(26, 188, 156, 0.05)')
		ctx.fillStyle = waterBg
	} catch (e) {
		ctx.fillStyle = 'rgba(26, 188, 156, 0.1)'
	}
	ctx.fillRect(padding, padding + rainfallAreaHeight, chartWidth, waterAreaHeight)
	
	// 绘制现代化网格线
	ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'
	ctx.lineWidth = 1
	
	// 垂直网格线（时间轴）
	const timeSteps = Math.min(timeArray.length, 8)
	for (let i = 0; i <= timeSteps; i++) {
		const x = padding + (chartWidth / timeSteps) * i
		ctx.beginPath()
		ctx.moveTo(x, padding)
		ctx.lineTo(x, padding + chartHeight)
		ctx.stroke()
	}
	
	// 水平网格线 - 降雨区域
	for (let i = 0; i <= 4; i++) {
		const y = padding + (rainfallAreaHeight / 4) * i
		ctx.beginPath()
		ctx.moveTo(padding, y)
		ctx.lineTo(padding + chartWidth, y)
		ctx.stroke()
	}
	
	// 水平网格线 - 水位区域
	for (let i = 0; i <= 6; i++) {
		const y = padding + rainfallAreaHeight + (waterAreaHeight / 6) * i
		ctx.beginPath()
		ctx.moveTo(padding, y)
		ctx.lineTo(padding + chartWidth, y)
		ctx.stroke()
	}
	
	// 绘制时间轴标签 - 减小字体
	ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
	ctx.font = '16rpx -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif'
	ctx.textAlign = 'center'
	for (let i = 0; i <= Math.min(timeSteps, 6); i++) {
		if (i * timeArray.length / timeSteps < timeArray.length) {
			const x = padding + (chartWidth / timeSteps) * i
			const timeIndex = Math.floor(i * timeArray.length / timeSteps)
			const timeLabel = new Date(timeArray[timeIndex]).toLocaleDateString('zh-CN', {
				month: 'short',
				day: 'numeric'
			})
			ctx.fillText(timeLabel, x, padding + chartHeight + 30)
		}
	}
	
	// 绘制Y轴标签 - 降雨量（倒置）- 减小字体
	ctx.textAlign = 'right'
	ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
	ctx.font = '14rpx -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif'
	for (let i = 0; i <= 4; i++) {
		const value = (maxRainfall / 4) * i  // 从0到最大值
		const y = padding + rainfallAreaHeight - (rainfallAreaHeight / 4) * i + 4
		ctx.fillText(`${value.toFixed(1)}mm`, padding - 10, y)
	}
	
	// 绘制Y轴标签 - 水位 - 减小字体
	const waterMax = Math.max(maxReservoir, maxRiver)
	const waterMin = Math.min(minReservoir, minRiver)
	for (let i = 0; i <= 6; i++) {
		const value = waterMin + (waterMax - waterMin) / 6 * i
		const y = padding + rainfallAreaHeight + waterAreaHeight - (waterAreaHeight / 6) * i + 4
		ctx.fillText(`${value.toFixed(1)}m`, padding - 10, y)
	}

	// 绘制现代化降雨石钟乳（倒置在上方）
	if (rainfallChartData.value.length > 0) {
		const stalactiteWidth = Math.max(chartWidth / timeArray.length * 0.6, 8)
		
		rainfallChartData.value.forEach(item => {
			const timeIndex = timeArray.indexOf(item.time)
			if (timeIndex >= 0) {
				const rainfall = item.precipitation || 0
				if (rainfall > 0) {
					const stalactiteHeight = (rainfall / maxRainfall) * rainfallAreaHeight * 0.9
					const x = padding + (chartWidth / timeArray.length) * timeIndex + (chartWidth / timeArray.length - stalactiteWidth) / 2
					const y = padding
					
					// 创建现代化石钟乳渐变 - 修复Edge兼容性
					try {
						const stalactiteGradient = ctx.createLinearGradient(x, y, x, y + stalactiteHeight)
						stalactiteGradient.addColorStop(0, getModernRainfallColor(rainfall, maxRainfall))
						stalactiteGradient.addColorStop(0.5, getModernRainfallColorMid(rainfall, maxRainfall))
						stalactiteGradient.addColorStop(1, getModernRainfallColorDark(rainfall, maxRainfall))
						ctx.fillStyle = stalactiteGradient
					} catch (e) {
						// Edge兼容性回退
						ctx.fillStyle = getModernRainfallColor(rainfall, maxRainfall)
					}
					
					// 绘制现代化石钟乳形状
					ctx.beginPath()
					ctx.moveTo(x + stalactiteWidth / 2, y)
					ctx.lineTo(x + stalactiteWidth * 0.15, y + stalactiteHeight * 0.25)
					ctx.quadraticCurveTo(x - stalactiteWidth * 0.05, y + stalactiteHeight * 0.65, x + stalactiteWidth * 0.25, y + stalactiteHeight * 0.95)
					ctx.quadraticCurveTo(x + stalactiteWidth / 2, y + stalactiteHeight * 1.05, x + stalactiteWidth * 0.75, y + stalactiteHeight * 0.95)
					ctx.quadraticCurveTo(x + stalactiteWidth * 1.05, y + stalactiteHeight * 0.65, x + stalactiteWidth * 0.85, y + stalactiteHeight * 0.25)
					ctx.lineTo(x + stalactiteWidth / 2, y)
					ctx.fill()
					
					// 添加现代化高光效果 - 修复Edge兼容性
					try {
						const highlightGradient = ctx.createLinearGradient(x, y, x + stalactiteWidth * 0.3, y + stalactiteHeight * 0.3)
						highlightGradient.addColorStop(0, 'rgba(255, 255, 255, 0.6)')
						highlightGradient.addColorStop(1, 'rgba(255, 255, 255, 0.1)')
						ctx.fillStyle = highlightGradient
					} catch (e) {
						ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'
					}
					ctx.beginPath()
					// 使用arc方法替代ellipse以提高兼容性
					ctx.save()
					ctx.translate(x + stalactiteWidth * 0.25, y + stalactiteHeight * 0.15)
					ctx.scale(stalactiteWidth * 0.12 / (stalactiteHeight * 0.08), 1)
					ctx.arc(0, 0, stalactiteHeight * 0.08, 0, 2 * Math.PI)
					ctx.restore()
					ctx.fill()
					
					// 添加现代化数值标签
					if (stalactiteHeight > 30) {
						ctx.fillStyle = '#ffffff'
						ctx.font = '12rpx -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif'
						ctx.textAlign = 'center'
						ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
						ctx.shadowBlur = 2
						ctx.fillText(rainfall.toFixed(1), x + stalactiteWidth / 2, y + stalactiteHeight / 2 + 4)
						ctx.shadowBlur = 0
					}
				}
			}
		})
	}
	
	// 绘制现代化水库水位折线图
	if (reservoirChartData.value.length > 1) {
		// 创建渐变线条 - 修复Edge兼容性
		try {
			const reservoirGradient = ctx.createLinearGradient(0, padding + rainfallAreaHeight, 0, padding + chartHeight)
			reservoirGradient.addColorStop(0, '#00bcd4')
			reservoirGradient.addColorStop(1, '#0097a7')
			ctx.strokeStyle = reservoirGradient
		} catch (e) {
			ctx.strokeStyle = '#00bcd4'
		}
		
		ctx.lineWidth = 5
		ctx.lineCap = 'round'
		ctx.lineJoin = 'round'
		ctx.shadowColor = 'rgba(0, 188, 212, 0.4)'
		ctx.shadowBlur = 8
		ctx.beginPath()
		
		let firstPoint = true
		reservoirChartData.value.forEach(item => {
			const timeIndex = timeArray.indexOf(item.time)
			if (timeIndex >= 0) {
				const x = padding + (chartWidth / timeArray.length) * timeIndex + (chartWidth / timeArray.length) / 2
				const waterMax = Math.max(maxReservoir, maxRiver)
				const waterMin = Math.min(minReservoir, minRiver)
				const y = padding + rainfallAreaHeight + waterAreaHeight - ((item.value - waterMin) / (waterMax - waterMin)) * waterAreaHeight
				
				if (firstPoint) {
					ctx.moveTo(x, y)
					firstPoint = false
				} else {
					ctx.lineTo(x, y)
				}
			}
		})
		ctx.stroke()
		ctx.shadowBlur = 0
		
		// 绘制现代化水库数据点
		reservoirChartData.value.forEach(item => {
			const timeIndex = timeArray.indexOf(item.time)
			if (timeIndex >= 0) {
				const x = padding + (chartWidth / timeArray.length) * timeIndex + (chartWidth / timeArray.length) / 2
				const waterMax = Math.max(maxReservoir, maxRiver)
				const waterMin = Math.min(minReservoir, minRiver)
				const y = padding + rainfallAreaHeight + waterAreaHeight - ((item.value - waterMin) / (waterMax - waterMin)) * waterAreaHeight
				
				// 外圈光晕 - 修复Edge兼容性
				try {
					const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, 12)
					glowGradient.addColorStop(0, 'rgba(0, 188, 212, 0.8)')
					glowGradient.addColorStop(1, 'rgba(0, 188, 212, 0)')
					ctx.fillStyle = glowGradient
				} catch (e) {
					ctx.fillStyle = 'rgba(0, 188, 212, 0.4)'
				}
				ctx.beginPath()
				ctx.arc(x, y, 12, 0, 2 * Math.PI)
				ctx.fill()
				
				// 主圆点 - 修复Edge兼容性
				try {
					const pointGradient = ctx.createRadialGradient(x - 2, y - 2, 0, x, y, 8)
					pointGradient.addColorStop(0, '#4dd0e1')
					pointGradient.addColorStop(1, '#00acc1')
					ctx.fillStyle = pointGradient
				} catch (e) {
					ctx.fillStyle = '#4dd0e1'
				}
				ctx.beginPath()
				ctx.arc(x, y, 8, 0, 2 * Math.PI)
				ctx.fill()
				
				// 白色边框
				ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)'
				ctx.lineWidth = 2
				ctx.stroke()
			}
		})
	}
	
	// 绘制现代化河道水位折线图
	if (riverChartData.value.length > 1) {
		// 创建渐变线条 - 修复Edge兼容性
		try {
			const riverGradient = ctx.createLinearGradient(0, padding + rainfallAreaHeight, 0, padding + chartHeight)
			riverGradient.addColorStop(0, '#66bb6a')
			riverGradient.addColorStop(1, '#43a047')
			ctx.strokeStyle = riverGradient
		} catch (e) {
			ctx.strokeStyle = '#66bb6a'
		}
		
		ctx.lineWidth = 5
		ctx.lineCap = 'round'
		ctx.lineJoin = 'round'
		ctx.shadowColor = 'rgba(102, 187, 106, 0.4)'
		ctx.shadowBlur = 8
		ctx.beginPath()
		
		let firstPoint = true
		riverChartData.value.forEach(item => {
			const timeIndex = timeArray.indexOf(item.time)
			if (timeIndex >= 0) {
				const x = padding + (chartWidth / timeArray.length) * timeIndex + (chartWidth / timeArray.length) / 2
				const waterMax = Math.max(maxReservoir, maxRiver)
				const waterMin = Math.min(minReservoir, minRiver)
				const y = padding + rainfallAreaHeight + waterAreaHeight - ((item.value - waterMin) / (waterMax - waterMin)) * waterAreaHeight
				
				if (firstPoint) {
					ctx.moveTo(x, y)
					firstPoint = false
				} else {
					ctx.lineTo(x, y)
				}
			}
		})
		ctx.stroke()
		ctx.shadowBlur = 0
		
		// 绘制现代化河道数据点
		riverChartData.value.forEach(item => {
			const timeIndex = timeArray.indexOf(item.time)
			if (timeIndex >= 0) {
				const x = padding + (chartWidth / timeArray.length) * timeIndex + (chartWidth / timeArray.length) / 2
				const waterMax = Math.max(maxReservoir, maxRiver)
				const waterMin = Math.min(minReservoir, minRiver)
				const y = padding + rainfallAreaHeight + waterAreaHeight - ((item.value - waterMin) / (waterMax - waterMin)) * waterAreaHeight
				
				// 外圈光晕 - 修复Edge兼容性
				try {
					const glowGradient = ctx.createRadialGradient(x, y, 0, x, y, 12)
					glowGradient.addColorStop(0, 'rgba(102, 187, 106, 0.8)')
					glowGradient.addColorStop(1, 'rgba(102, 187, 106, 0)')
					ctx.fillStyle = glowGradient
				} catch (e) {
					ctx.fillStyle = 'rgba(102, 187, 106, 0.4)'
				}
				ctx.beginPath()
				ctx.arc(x, y, 12, 0, 2 * Math.PI)
				ctx.fill()
				
				// 主圆点 - 修复Edge兼容性
				try {
					const pointGradient = ctx.createRadialGradient(x - 2, y - 2, 0, x, y, 8)
					pointGradient.addColorStop(0, '#81c784')
					pointGradient.addColorStop(1, '#66bb6a')
					ctx.fillStyle = pointGradient
				} catch (e) {
					ctx.fillStyle = '#81c784'
				}
				ctx.beginPath()
				ctx.arc(x, y, 8, 0, 2 * Math.PI)
				ctx.fill()
				
				// 白色边框
				ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)'
				ctx.lineWidth = 2
				ctx.stroke()
			}
		})
	}
	
	// 绘制现代化图例 - 减小字体
	const legendY = padding + chartHeight + 60
	const legendItemWidth = 120
	const legendStartX = (canvasWidth - legendItemWidth * 3) / 2
	
	// 降雨图例
	ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
	ctx.font = '16rpx -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif'
	ctx.textAlign = 'left'
	
	// 降雨图例图标
	const rainfallLegendGradient = ctx.createLinearGradient(legendStartX, legendY - 10, legendStartX, legendY + 10)
	rainfallLegendGradient.addColorStop(0, '#00d4ff')
	rainfallLegendGradient.addColorStop(1, '#009acc')
	ctx.fillStyle = rainfallLegendGradient
	ctx.fillRect(legendStartX, legendY - 8, 20, 16)
	ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
	ctx.fillText('降雨量', legendStartX + 30, legendY + 6)
	
	// 水库图例图标
	const reservoirLegendGradient = ctx.createLinearGradient(legendStartX + legendItemWidth, legendY - 5, legendStartX + legendItemWidth + 20, legendY + 5)
	reservoirLegendGradient.addColorStop(0, '#4dd0e1')
	reservoirLegendGradient.addColorStop(1, '#00acc1')
	ctx.fillStyle = reservoirLegendGradient
	ctx.beginPath()
	ctx.arc(legendStartX + legendItemWidth + 10, legendY, 8, 0, 2 * Math.PI)
	ctx.fill()
	ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
	ctx.fillText('水库水位', legendStartX + legendItemWidth + 25, legendY + 6)
	
	// 河道图例图标
	const riverLegendGradient = ctx.createLinearGradient(legendStartX + legendItemWidth * 2, legendY - 5, legendStartX + legendItemWidth * 2 + 20, legendY + 5)
	riverLegendGradient.addColorStop(0, '#81c784')
	riverLegendGradient.addColorStop(1, '#66bb6a')
	ctx.fillStyle = riverLegendGradient
	ctx.beginPath()
	ctx.arc(legendStartX + legendItemWidth * 2 + 10, legendY, 8, 0, 2 * Math.PI)
	ctx.fill()
	ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
	ctx.fillText('河道水位', legendStartX + legendItemWidth * 2 + 25, legendY + 6)
	
	// 绘制现代化标题
	ctx.fillStyle = 'rgba(255, 255, 255, 0.95)'
	ctx.font = 'bold 32rpx -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
	ctx.textAlign = 'center'
	ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
	ctx.shadowBlur = 4
	ctx.fillText('水文数据分析图表', canvasWidth / 2, 40)
	ctx.shadowBlur = 0
	
	// 绘制副标题
	ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
	ctx.font = '24rpx -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
	const dateRange = `${startDate.value} 至 ${endDate.value}`
	ctx.fillText(dateRange, canvasWidth / 2, 65)
	ctx.draw()
}

// 获取降雨颜色
const getRainfallColor = (rainfall) => {
	if (rainfall === 0) return '#e9ecef'
	if (rainfall < 10) return '#4fc3f7'
	if (rainfall < 25) return '#29b6f6'
	if (rainfall < 50) return '#039be5'
	return '#0277bd'
}

// 获取降雨深色
const getRainfallColorDark = (rainfall) => {
	if (rainfall === 0) return '#dee2e6'
	if (rainfall < 10) return '#29b6f6'
	if (rainfall < 25) return '#039be5'
	if (rainfall < 50) return '#0277bd'
	return '#01579b'
}

// 现代化降雨颜色函数
const getModernRainfallColor = (rainfall, maxRainfall) => {
	const intensity = rainfall / maxRainfall
	if (rainfall === 0) return 'rgba(255, 255, 255, 0.1)'
	if (intensity < 0.2) return '#00d4ff'  // 浅蓝
	if (intensity < 0.4) return '#0099ff'  // 蓝色
	if (intensity < 0.6) return '#3366ff'  // 深蓝
	if (intensity < 0.8) return '#6633ff'  // 紫蓝
	return '#9900ff'  // 紫色
}

const getModernRainfallColorMid = (rainfall, maxRainfall) => {
	const intensity = rainfall / maxRainfall
	if (rainfall === 0) return 'rgba(255, 255, 255, 0.05)'
	if (intensity < 0.2) return '#00b8e6'
	if (intensity < 0.4) return '#0080e6'
	if (intensity < 0.6) return '#2952e6'
	if (intensity < 0.8) return '#5229e6'
	return '#8000e6'
}

const getModernRainfallColorDark = (rainfall, maxRainfall) => {
	const intensity = rainfall / maxRainfall
	if (rainfall === 0) return 'rgba(255, 255, 255, 0.02)'
	if (intensity < 0.2) return '#009acc'
	if (intensity < 0.4) return '#0066cc'
	if (intensity < 0.6) return '#2238cc'
	if (intensity < 0.8) return '#4a1fcc'
	return '#7300cc'
}

// 数据验证函数 - 更新以处理真实API数据
const validateRainfallData = (record) => {
	// 检查必要字段
	if (!record || typeof record !== 'object') return false
	
	// precipitation必须存在（可以为0）
	const precipitation = parseFloat(record.precipitation)
	if (isNaN(precipitation) || precipitation < 0) return false
	
	// 降雨量不能超过合理范围（0-500mm）
	if (precipitation > 500) return false
	
	// 检查时间字段
	const timeStr = record.datetime_hour || record.tm
	if (!timeStr) return false
	
	// 验证时间格式
	const timeRegex = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/
	if (!timeRegex.test(timeStr)) return false
	
	return true
}

// 格式化降雨数据 - 保留所有有效数据包括0值
const formatRainfallRecord = (record, dateTimeKey) => {
	const precipitation = parseFloat(record.precipitation)
	return {
		stcd: record.stcd || props.stationCode,
		precipitation: Math.round(precipitation * 10) / 10, // 保留1位小数
		datetime_hour: record.datetime_hour || dateTimeKey,
		station_name: record.station_name || '未知站点',
		rainfall_level: getRainfallLevel(precipitation),
		intv: record.intv || 24
	}
}

// 获取降雨等级
const getRainfallLevel = (precipitation) => {
	if (precipitation === 0) return '无降水'
	if (precipitation < 5) return '小雨'
	if (precipitation < 15) return '中雨'
	if (precipitation < 30) return '大雨'
	return '暴雨'
}

// 图表触摸事件
const onChartTouch = (e) => {
	console.log('图表触摸事件:', e)
}

// 查询降雨数据
const queryRainfallData = async () => {
	if (!props.stationCode) return
	
	try {
		const startTime = formatDateTime(startDate.value)
		const endTime = formatDateTime(endDate.value)
		
		console.log('正在调用降雨数据API:', `/api/get_pptn_by_stcd?stcd=${props.stationCode}&start_time_str=${encodeURIComponent(startTime)}&end_time_str=${encodeURIComponent(endTime)}`)
		
		const response = await uni.request({
			url: `/api/get_pptn_by_stcd?stcd=${props.stationCode}&start_time_str=${encodeURIComponent(startTime)}&end_time_str=${encodeURIComponent(endTime)}`,
			method: 'GET'
		})
		
		console.log('降雨数据API响应:', response)
		if (response.data.success) {
			const data = response.data.data
			rainfallData.value = []
			
			// 修复数据处理逻辑 - 处理真实API数据结构
			for (const [dateTimeKey, records] of Object.entries(data)) {
				if (Array.isArray(records)) {
					records.forEach(record => {
						// 使用数据验证函数过滤有效数据
						if (validateRainfallData(record)) {
							rainfallData.value.push(formatRainfallRecord(record, dateTimeKey))
						}
					})
				}
			}
			
			// 转换为图表数据 - 包含所有有效数据（包括0值）
			rainfallChartData.value = rainfallData.value.map(item => ({
				time: item.datetime_hour,
				precipitation: parseFloat(item.precipitation),
				station: item.station_name || item.stcd
			}))
			
			console.log('处理后的降雨图表数据:', rainfallChartData.value)
			
			// 绘制图表
			await nextTick()
			drawMainChart()
		}
	} catch (error) {
		console.error('获取降雨数据失败:', error)
		
		// 错误时也生成一些模拟数据
		const startDateTime = new Date(formatDateTime(startDate.value))
		const mockData = []
		for (let i = 0; i < 7; i++) {
			const currentTime = new Date(startDateTime.getTime() + i * 24 * 60 * 60 * 1000)
			const timeStr = currentTime.toISOString().replace('T', ' ').substring(0, 19)
			const precipitation = Math.random() * 25 + 2 // 2-27mm
			
			mockData.push({
				stcd: props.stationCode,
				precipitation: Math.round(precipitation * 10) / 10,
				datetime_hour: timeStr,
				station_name: '模拟数据'
			})
		}
		
		rainfallData.value = mockData
		rainfallChartData.value = mockData.map(item => ({
			time: item.datetime_hour,
			precipitation: item.precipitation,
			station: item.station_name
		}))
		
		await nextTick()
		drawMainChart()
	}
}

// 查询水库数据
const queryReservoirData = async () => {
	if (!props.stationCode) return
	
	try {
		const startTime = formatDateTime(startDate.value)
		const endTime = formatDateTime(endDate.value)
		
		console.log('正在调用水库数据API:', `/api/get_rsvr_by_stcd?stcd=${props.stationCode}&start_time_str=${encodeURIComponent(startTime)}&end_time_str=${encodeURIComponent(endTime)}`)
		
		const response = await uni.request({
			url: `/api/get_rsvr_by_stcd?stcd=${props.stationCode}&start_time_str=${encodeURIComponent(startTime)}&end_time_str=${encodeURIComponent(endTime)}`,
			method: 'GET'
		})
		
		console.log('水库数据API响应:', response)
		if (response.data.success) {
			reservoirData.value = response.data.data
			
			// 转换为图表数据
			reservoirChartData.value = reservoirData.value
				.filter(item => item.rz)
				.map(item => ({
					time: item.datetime_hour,
					value: parseFloat(item.rz)
				}))
			
			hasReservoirData.value = reservoirChartData.value.length > 0
			
			// 绘制图表
			await nextTick()
			drawMainChart()
		}
	} catch (error) {
		console.error('获取水库数据失败:', error)
	}
}

// 查询河道数据
const queryRiverData = async () => {
	if (!props.stationCode) return
	
	try {
		const startTime = formatDateTime(startDate.value)
		const endTime = formatDateTime(endDate.value)
		
		console.log('正在调用河道数据API:', `/api/get_river_by_stcd?stcd=${props.stationCode}&start_time_str=${encodeURIComponent(startTime)}&end_time_str=${encodeURIComponent(endTime)}`)
		
		const response = await uni.request({
			url: `/api/get_river_by_stcd?stcd=${props.stationCode}&start_time_str=${encodeURIComponent(startTime)}&end_time_str=${encodeURIComponent(endTime)}`,
			method: 'GET'
		})
		
		console.log('河道数据API响应:', response)
		if (response.data.success) {
			riverData.value = response.data.data
			
			// 转换为图表数据
			riverChartData.value = riverData.value
				.filter(item => item.z)
				.map(item => ({
					time: item.tm,
					value: parseFloat(item.z)
				}))
			
			hasRiverData.value = riverChartData.value.length > 0
			
			// 绘制图表
			await nextTick()
			drawMainChart()
		}
	} catch (error) {
		console.error('获取河道数据失败:', error)
	}
}

// 查询所有数据
const queryAllData = async () => {
	loading.value = true
	try {
		await Promise.all([
			queryRainfallData(),
			queryReservoirData(),
			queryRiverData()
		])
	} finally {
		loading.value = false
	}
}

// 监听站点编码变化
watch(() => props.stationCode, (newCode) => {
	if (newCode) {
		queryAllData()
	}
}, { immediate: true })

// 组件挂载后初始化Canvas
onMounted(() => {
	initCanvas()
})

// 数据统计方法
const getTotalRainfall = () => {
	return rainfallChartData.value.reduce((sum, item) => sum + (item.precipitation || 0), 0).toFixed(1)
}

const getAvgReservoirLevel = () => {
	if (reservoirChartData.value.length === 0) return '0.0'
	const avg = reservoirChartData.value.reduce((sum, item) => sum + item.value, 0) / reservoirChartData.value.length
	return avg.toFixed(1)
}

const getAvgRiverLevel = () => {
	if (riverChartData.value.length === 0) return '0.0'
	const avg = riverChartData.value.reduce((sum, item) => sum + item.value, 0) / riverChartData.value.length
	return avg.toFixed(1)
}

// 暴露方法给父组件
defineExpose({
	queryAllData,
	queryRainfallData,
	queryReservoirData,
	queryRiverData,
	getTotalRainfall,
	getAvgReservoirLevel,
	getAvgRiverLevel
})
</script>

<style scoped>
/* 移动端优化样式 */
.historical-data {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
	padding: 0 0 40rpx 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

/* 添加现代化背景效果 */
.historical-data::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
	animation: backgroundShift 10s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: -1;
}

@keyframes backgroundShift {
	0% { transform: translateX(-10rpx) translateY(-10rpx); }
	100% { transform: translateX(10rpx) translateY(10rpx); }
}

/* 控制面板样式 - 移动端优化 */
.control-panel {
	background: rgba(255, 255, 255, 0.95);
	margin: 24rpx 24rpx 0 24rpx;
	border-radius: 40rpx;
	padding: 40rpx;
	box-shadow: 
		0 32rpx 64rpx rgba(0, 0, 0, 0.15),
		0 0 0 1rpx rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(30rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	position: relative;
	z-index: 2;
	transform: translateY(0);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.control-panel:active {
	transform: translateY(2rpx);
	box-shadow: 
		0 24rpx 48rpx rgba(0, 0, 0, 0.12),
		0 0 0 1rpx rgba(255, 255, 255, 0.2);
}

.panel-header {
	text-align: center;
	margin-bottom: 48rpx;
}

.panel-title {
	font-size: 48rpx;
	font-weight: 800;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	margin-bottom: 12rpx;
	text-shadow: none;
	letter-spacing: -0.5rpx;
}

.panel-subtitle {
	font-size: 26rpx;
	color: #8e9aaf;
	font-weight: 500;
	letter-spacing: 1rpx;
	opacity: 0.8;
}

.time-selector-card {
	background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
	border-radius: 32rpx;
	padding: 36rpx;
	border: 2rpx solid rgba(102, 126, 234, 0.1);
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.08);
	position: relative;
	overflow: hidden;
}

.time-selector-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.date-row {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 36rpx;
}

.date-picker-modern {
	flex: 1;
	min-width: 0;
}

.date-label {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 16rpx;
}

.label-icon {
	font-size: 28rpx;
	color: #667eea;
}

.label-text {
	font-size: 26rpx;
	color: #34495e;
	font-weight: 600;
}

.picker-modern {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2rpx solid #e9ecef;
	border-radius: 24rpx;
	padding: 28rpx 32rpx;
	box-shadow: 
		0 4rpx 16rpx rgba(0, 0, 0, 0.06),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	min-height: 88rpx;
}

.picker-modern::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
	transition: left 0.6s ease;
}

.picker-modern:active {
	transform: scale(0.98);
	border-color: #667eea;
	box-shadow: 
		0 8rpx 24rpx rgba(102, 126, 234, 0.15),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
}

.picker-modern:active::before {
	left: 100%;
}

.picker-value {
	font-size: 30rpx;
	color: #2c3e50;
	font-weight: 600;
	flex: 1;
	text-align: left;
}

.picker-arrow {
	font-size: 24rpx;
	color: #95a5a6;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: rotate(0deg);
}

.picker-modern:active .picker-arrow {
	transform: rotate(180deg);
	color: #667eea;
}

.date-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 24rpx 0;
}

.separator-line {
	font-size: 28rpx;
	color: #bdc3c7;
	font-weight: 600;
}

.query-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 32rpx;
	padding: 36rpx 48rpx;
	font-size: 32rpx;
	font-weight: 700;
	box-shadow: 
		0 16rpx 32rpx rgba(102, 126, 234, 0.4),
		0 0 0 1rpx rgba(255, 255, 255, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	position: relative;
	overflow: hidden;
	min-height: 96rpx;
}

.query-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s ease;
}

.query-btn:active {
	transform: translateY(2rpx) scale(0.98);
	box-shadow: 
		0 8rpx 16rpx rgba(102, 126, 234, 0.3),
		0 0 0 1rpx rgba(255, 255, 255, 0.2);
}

.query-btn:active::before {
	left: 100%;
}

.query-btn:disabled {
	opacity: 0.6;
	transform: none;
	box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.2);
}

.query-btn:disabled::before {
	display: none;
}

.btn-icon {
	font-size: 36rpx;
	transition: transform 0.3s ease;
}

.query-btn:active .btn-icon {
	transform: scale(1.1);
}

.btn-text {
	font-size: 32rpx;
	font-weight: 700;
}

/* 图表区域样式 - 移动端优化 */
.chart-section {
	background: rgba(255, 255, 255, 0.95);
	margin: 24rpx;
	border-radius: 40rpx;
	box-shadow: 
		0 32rpx 64rpx rgba(0, 0, 0, 0.15),
		0 0 0 1rpx rgba(255, 255, 255, 0.2);
	overflow: visible;
	backdrop-filter: blur(30rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	position: relative;
	z-index: 2;
}

.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 48rpx;
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	color: white;
}

.chart-title {
	font-size: 48rpx;
	font-weight: 800;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.chart-indicators {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.indicator {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.indicator-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
}

.rainfall-dot {
	background: #4fc3f7;
	box-shadow: 0 0 12rpx rgba(79, 195, 247, 0.6);
}

.reservoir-dot {
	background: #1976d2;
	box-shadow: 0 0 12rpx rgba(25, 118, 210, 0.6);
}

.river-dot {
	background: #388e3c;
	box-shadow: 0 0 12rpx rgba(56, 142, 60, 0.6);
}

.indicator-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.chart-container {
	position: relative;
	padding: 48rpx;
	min-height: 1200rpx;
	height: auto;
}

.main-chart {
	width: 100%;
	height: 1200rpx;
	border-radius: 24rpx;
	box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
	display: block;
}

.chart-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8rpx);
	border-radius: 24rpx;
}

.loading-spinner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24rpx;
}

.spinner-icon {
	font-size: 80rpx;
	animation: spin 2s linear infinite;
}

.loading-text {
	font-size: 36rpx;
	color: #667eea;
	font-weight: 600;
}

/* 数据洞察区域 */
.insights-section {
	margin: 0 24rpx 24rpx;
	position: relative;
	z-index: 2;
}

.insights-header {
	padding: 32rpx 0;
	text-align: center;
}

.insights-title {
	font-size: 48rpx;
	font-weight: 800;
	color: white;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.insights-grid {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.insight-card {
	background: rgba(255, 255, 255, 0.98);
	border-radius: 24rpx;
	padding: 40rpx;
	box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20rpx);
	position: relative;
	z-index: 1;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 32rpx;
}

.card-icon {
	font-size: 48rpx;
}

.card-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #2c3e50;
}

.card-content {
	text-align: center;
}

.metric {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8rpx;
	margin-bottom: 16rpx;
}

.metric-value {
	font-size: 72rpx;
	font-weight: 800;
	color: #2c3e50;
}

.metric-unit {
	font-size: 32rpx;
	font-weight: 600;
	color: #7f8c8d;
}

.metric-label {
	font-size: 28rpx;
	color: #95a5a6;
	font-weight: 500;
}

.rainfall-card {
	border-left: 8rpx solid #4fc3f7;
}

.reservoir-card {
	border-left: 8rpx solid #1976d2;
}

.river-card {
	border-left: 8rpx solid #388e3c;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 120rpx 48rpx;
	margin: 0 24rpx 24rpx;
	background: rgba(255, 255, 255, 0.98);
	border-radius: 32rpx;
	box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20rpx);
	position: relative;
	z-index: 2;
}

.empty-icon {
	font-size: 120rpx;
	display: block;
	margin-bottom: 32rpx;
	opacity: 0.6;
}

.empty-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #2c3e50;
	display: block;
	margin-bottom: 16rpx;
}

.empty-subtitle {
	font-size: 32rpx;
	color: #7f8c8d;
	font-weight: 500;
	line-height: 1.6;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* 动画定义 */
@keyframes slideDown {
	0% {
		transform: translateY(-100rpx);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideUp {
	0% {
		transform: translateY(100rpx);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideLeft {
	0% {
		transform: translateX(-100rpx);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideRight {
	0% {
		transform: translateX(100rpx);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes scaleIn {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(0.9);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes bounceIn {
	0% {
		transform: scale(0.3);
		opacity: 0;
	}
	50% {
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes bounce {
	0%, 20%, 53%, 80%, 100% {
		transform: translate3d(0, 0, 0);
	}
	40%, 43% {
		transform: translate3d(0, -30rpx, 0);
	}
	70% {
		transform: translate3d(0, -15rpx, 0);
	}
	90% {
		transform: translate3d(0, -4rpx, 0);
	}
}

/* 动画类 */
.animate-slide-down {
	animation: slideDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-slide-up {
	animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-slide-up-delay {
	animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
	opacity: 0;
}

.animate-slide-up-delay-2 {
	animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
	opacity: 0;
}

.animate-slide-left {
	animation: slideLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
	opacity: 0;
}

.animate-slide-right {
	animation: slideRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
	opacity: 0;
}

.animate-fade-in {
	animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-delay {
	animation: fadeIn 0.6s ease-out 0.3s forwards;
	opacity: 0;
}

.animate-fade-in-slow {
	animation: fadeIn 1.2s ease-out forwards;
}

.animate-scale-in {
	animation: scaleIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
	opacity: 0;
}

.animate-scale-in-delay-1 {
	animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
	opacity: 0;
}

.animate-scale-in-delay-2 {
	animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
	opacity: 0;
}

.animate-scale-in-delay-3 {
	animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s forwards;
	opacity: 0;
}

.animate-zoom-in {
	animation: zoomIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
	opacity: 0;
}

.animate-bounce-in {
	animation: bounceIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
	opacity: 0;
}

.animate-bounce {
	animation: bounce 2s infinite;
}

.animate-pulse {
	animation: pulse 2s infinite;
}

.animate-spin {
	animation: spin 2s linear infinite;
}

.animate-card-in-1 {
	animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
	opacity: 0;
}

.animate-card-in-2 {
	animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.0s forwards;
	opacity: 0;
}

.animate-card-in-3 {
	animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
	opacity: 0;
}

/* 交互动画 */
.query-btn {
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.query-btn:active {
	transform: scale(0.95);
}

.picker-modern {
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.picker-modern:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 0.9);
}

.insight-card {
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.insight-card:active {
	transform: translateY(-8rpx);
	box-shadow: 0 24rpx 48rpx rgba(0, 0, 0, 0.15);
}

.indicator {
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.indicator:active {
	transform: scale(1.05);
}

/* 响应式动画优化 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
</style>